<template>
  <div id="components-layout-demo-basic">
    <!-- 生成自定义表单 -->
    <a-card :bordered="false" :loading="loading">
      <div class=" ">
        <span v-for="item in flowData.stepButtons" :key="item.id">
          <a-button
            class="mr-1"
            size="small"
            @click="handleTest(item.code)"
            type="primary"
          >
          <template #icon> <CopyOutlined  v-if="item.name =='保存'"/>
            <SendOutlined v-if="item.name =='发送'" /></template>
            {{item.name}}
          </a-button>
        </span>
      </div>
      <a-divider></a-divider>
      <div style="text-align: center">
        <h2>
          {{ flowData.flowTitle }}
          <small>({{ flowData.stepName }})</small>
        </h2>
      </div>
      <generate-form
        v-if="isshow"
        insite="true"
        @on-change="handleDataChange"
        :data="widgetForm"
        :flowData="flowData"
        ref="generateForm"
        :key="timerKey"
      ></generate-form>
      <div></div>

      <vxe-modal resize width="600" v-model="commentVisible">
        <template v-slot>
          <div v-for="item in nextStepsInfo.steps" :key="item.stepId">
            <span>
              流程{{ steptype === 'flowsend' ? '发送' : '退回' }}至：
              {{ item.stepName }}
              <span class="ml-2">处理人：{{ item.memberName }}</span>
            </span>
          </div>
          <div>
            <a-textarea
              v-if="!flowData.isFirstStep"
              class="mt-1"
              :rows="5"
              v-model="comment"
              placeholder="请输入意见"
            ></a-textarea>
          </div>
          <div style="text-align: center" class="mt-1">
            <a-button type="primary" @click="sendSubmit"><template #icon><SendOutlined /></template>发送</a-button>
            <a-button @click="commentVisible = false" class="ml-2">
              <template #icon><CloseCircleOutlined  /></template>取消
            </a-button>
          </div>
        </template>
      </vxe-modal>

      <vxe-modal
        resize
        width="600"
        title="流程处理"
        v-model="organizeSelectVisible"
      >
        <template v-slot>
          <div v-for="item in nextStepsInfo.steps" :key="item.stepId">
            <div class="mb-1" v-if="item.memberName === ''">
              <div style="margin-bottom: 5px">
                人员选择 - {{ item.stepName }}
              </div>
              <OrganizeSelect
                :onlyUser="true"
                @childByValue="selectSendUser(item, $event)"
              ></OrganizeSelect>
            </div>
            <div v-else class="mb-1">
              <span>
                流程{{ steptype === 'flowsend' ? '发送' : '退回' }}至：
                {{ item.stepName }}
                <span class="ml-2">处理人：{{ item.memberName }}</span>
              </span>
            </div>
          </div>
          <div>
            <a-textarea
              v-if="!flowData.isFirstStep"
              class="mt-2"
              :rows="5"
              v-model="comment"
              placeholder="请输入意见"
            ></a-textarea>
          </div>
          <div style="text-align: center" class="mt-1">
            <a-button type="primary" @click="sendSubmit"><template #icon><SendOutlined /></template>发送</a-button>
            <a-button @click="organizeSelectVisible = false" class="ml-2">
              <template #icon><CloseCircleOutlined  /></template>取消
            </a-button>
          </div>
        </template>
      </vxe-modal>
    </a-card>
    <!-- 自定义表单预览结束 -->
  </div>
</template>

<script>
  import GenerateForm from '@/mycomponents/customerForm/GenerateForm'
  import { Get, Command, Getsteps } from '@/api/flowtask/api'
  import OrganizeSelect from '@/mycomponents/organize/organizeSelect'
  import { CopyOutlined,SendOutlined,CloseCircleOutlined } from '@ant-design/icons-vue'

  export default {
    name: 'FmMakingForm',
    components: {
      GenerateForm,
      OrganizeSelect,
      CopyOutlined,
      SendOutlined,
      CloseCircleOutlined
    },

    data() {
      return {
        loading: true,
        timerKey: '',
        commentVisible: false, //处理意见
        organizeSelectVisible: false, // 选择人员
        nextStepsInfo: {}, // 退回或者下一步信息
        nextSteps: [], // 退回或者下一步信息
        widgetForm: {
          list: [],
          config: {
            labelWidth: 20,
            labelPosition: 'right',
            size: 0,
            offset: 0,
            tableName: '',
            note: '',
          },
        },
        taskId: '',
        flowData: {},
        stepId: '',
        isshow: false,
        comment: '', // 意见
      }
    },
    created() {
      // console.log('this.ruote', this.$route)
      this.load()
    },
    watch: {
      $route() {
        this.load()
      },
    },
    methods: {
      load() {
        this.taskId = this.$route.query.taskId
        this.flowId = this.$route.query.id
        Get({ flowId: this.flowId, taskId: this.taskId }).then((res) => {
          console.log('表单数据', res)
          if (res.isSuccess) {
            var content = JSON.parse(res.content.formJSON)
            this.widgetForm = content
            this.stepId = res.content.stepId
            this.flowData = res.content
            this.isshow = true
            this.timerKey = new Date().getTime()
            this.loading = false
          }
        })
      },
      selectSendUser(item, res) {
        item.member = res.resId
      },

      // 点击操作按钮事件
      handleTest(code) {
        var that = this
        this.$refs.generateForm
          .getData()
          .then((data) => {
            // console.log('data', data)
            var tablelist = []
            for (const item in data.userData.subtable) {
              tablelist.push(data.userData.subtable[item])
            }

            delete data.userData.subtable
            var formJson = {
              data: data.userData,
              subtable: tablelist,
            }
            that.formData = JSON.stringify(formJson)

            console.log('formJson', formJson)

            that.steptype = code
            switch (code) {
              case 'flowsave':
                // console.log('that.nextStepsInfo', that.nextStepsInfo)
                Command({
                  Method: code,
                  FormData: that.formData,
                  FlowId: that.flowId,
                  TaskId: that.taskId,
                  EntityId: that.nextStepsInfo.entityId,
                }).then((res) => {
                  console.log('流程发起保存', res)
                  if (res.isSuccess) {
                    this.$success({
                      title: '提示',
                      content: (
                        <div>
                          <p>步骤保存成功！</p>
                        </div>
                      ),
                      onOk() {
                        that.$router
                          .push({
                            path: '/workbench/startFlow',
                            query: {
                              id: res.content.flowId,
                              taskId: res.content.taskId,
                            },
                          })
                          .catch((err) => {
                            console.log(err)
                          })
                      },
                    })
                  }
                })
                break
              case 'flowsend':
                Getsteps({
                  type: 1,
                  flowid: that.flowId,
                  formdata: this.formData,
                  taskId: that.taskId,
                }).then((res) => {
                  console.log('步骤信息', res)
                  if (res.isSuccess) {
                    this.nextStepsInfo = res.content
                    // this.nextSteps = []
                    var isSelectorganize = false
                    res.content.steps.forEach((element) => {
                      if (element.member === '') {
                        isSelectorganize = true
                      }
                    })
                    if (isSelectorganize) {
                      that.organizeSelectVisible = true
                    } else {
                      that.commentVisible = true
                    }
                  }
                })
                break
              case 'flowBack':
                Getsteps({
                  type: 0,
                  flowid: that.flowId,
                  formdata: this.formData,
                  taskId: that.taskId,
                }).then((res) => {
                  console.log('步骤信息', res)
                  if (res.isSuccess) {
                    that.nextStepsInfo = res.content
                    that.commentVisible = true
                  }
                })
                break
            }
          })
          .catch((e) => {
            console.log(e)
            // this.$refs.widgetPreview.end()
          })
      },

      //选择人员界面提交事件
      sendSubmit() {
        console.log()
        var that = this
        this.nextSteps = []
        this.nextStepsInfo.steps.forEach((element) => {
          this.nextSteps.push({
            StepId: element.stepId,
            Member: element.member,
            // stepName:element.stepName,
          })
        })
        Command({
          Method: that.steptype,
          FormData: this.formData,
          FlowId: that.flowId,
          Steps: JSON.stringify(this.nextSteps),
          Comment: that.comment,
          TaskId: that.taskId,
          EntityId: that.nextStepsInfo.entityId,
        }).then((res) => {
          if (res.isSuccess) {
            this.$success({
              title: '提示',
              // JSX support
              content: (
                <div>
                  <p>步骤处理成功！</p>
                </div>
              ),
              onOk() {
                that.$router
                  .push({
                    path: '/workbench/Pending',
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              },
            })
            that.organizeSelectVisible = false
          } else {
            console.log(res)
            this.$message.error(res.message)
          }
        })
      },
      handleDataChange(field, value, data) {
        console.log(field, value, data)
      },
    },
  }
</script>

<style></style>
